
<!DOCTYPE HTML>
<html lang="" >
    <head>
        <meta charset="UTF-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <title>懒加载入口文件 · test search plus plugin</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="description" content="">
        <meta name="generator" content="GitBook 3.2.2">
        
        
        
    
    <link rel="stylesheet" href="gitbook/style.css">

    
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-search-pro/search.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-fontsettings/website.css">
                
            
                
                <link rel="stylesheet" href="gitbook/gitbook-plugin-highlight/website.css">
                
            
        

    

    
        
    
        
    
        
    
        
    
        
    
        
    

        
    
    
    <meta name="HandheldFriendly" content="true"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="gitbook/images/apple-touch-icon-precomposed-152.png">
    <link rel="shortcut icon" href="gitbook/images/favicon.ico" type="image/x-icon">

    
    <link rel="next" href="Isomorphic-app.html" />
    
    
    <link rel="prev" href="Multiple-entry-points.html" />
    

    </head>
    <body>
        
<div class="book">
    <div class="book-summary">
        
            
<div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search" />
</div>

            
                <nav role="navigation">
                


<ul class="summary">
    
    

    

    
        
        
    
        <li class="chapter " data-level="1.1" data-path="./">
            
                <a href="./">
            
                    
                    Introduction
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2" data-path="Introduction-to-Webpack.html">
            
                <a href="Introduction-to-Webpack.html">
            
                    
                    介绍 Webpack
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.2.1" data-path="Getting-started.html">
            
                <a href="Getting-started.html">
            
                    
                    第一步
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.2" data-path="Running-a-workflow.html">
            
                <a href="Running-a-workflow.html">
            
                    
                    开始工作流
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.3" data-path="Automatic-browser-refresh.html">
            
                <a href="Automatic-browser-refresh.html">
            
                    
                    浏览器自动刷新
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.2.4" data-path="Requiring-files.html">
            
                <a href="Requiring-files.html">
            
                    
                    引入文件
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.3" data-path="Introduction-to-React-JS.html">
            
                <a href="Introduction-to-React-JS.html">
            
                    
                    React JS
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.3.1" data-path="Configuring-react-js.html">
            
                <a href="Configuring-react-js.html">
            
                    
                    配置 React JS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.2" data-path="Optimizing-rebundling.html">
            
                <a href="Optimizing-rebundling.html">
            
                    
                    优化重合并
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.3.3" data-path="Type-checking-with-flow.html">
            
                <a href="Type-checking-with-flow.html">
            
                    
                    Flow
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.4" data-path="CSS-Fonts-Images.md">
            
                <span>
            
                    
                    CSS, Fonts and Images
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.4.1" data-path="Loading-CSS.html">
            
                <a href="Loading-CSS.html">
            
                    
                    加载 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.2" data-path="Automatic-CSS-refresh.html">
            
                <a href="Automatic-CSS-refresh.html">
            
                    
                    自动刷新 CSS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.3" data-path="Loading-LESS-or-SASS.html">
            
                <a href="Loading-LESS-or-SASS.html">
            
                    
                    加载 LESS 和 SASS
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.4" data-path="Inlining-images.html">
            
                <a href="Inlining-images.html">
            
                    
                    内联 images
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.4.5" data-path="Inlining-fonts.html">
            
                <a href="Inlining-fonts.html">
            
                    
                    内联 fonts
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.5" data-path="Deployment-strategies.md">
            
                <span>
            
                    
                    部署策略
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.5.1" data-path="Structuring-configuration.html">
            
                <a href="Structuring-configuration.html">
            
                    
                    发布配置
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.2" data-path="Single-bundle.html">
            
                <a href="Single-bundle.html">
            
                    
                    合并成单文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.3" data-path="Split-app-and-vendors.html">
            
                <a href="Split-app-and-vendors.html">
            
                    
                    分离应用和第三方
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.4" data-path="Multiple-entry-points.html">
            
                <a href="Multiple-entry-points.html">
            
                    
                    多重入口
            
                </a>
            

            
        </li>
    
        <li class="chapter active" data-level="1.5.5" data-path="Lazy-loaded-entry-points.html">
            
                <a href="Lazy-loaded-entry-points.html">
            
                    
                    懒加载入口文件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.5.6" data-path="Isomorphic-app.html">
            
                <a href="Isomorphic-app.html">
            
                    
                    同构渲染
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    
        <li class="chapter " data-level="1.6" data-path="Wing-It-Like-a-Pro.html">
            
                <a href="Wing-It-Like-a-Pro.html">
            
                    
                    进阶
            
                </a>
            

            
            <ul class="articles">
                
    
        <li class="chapter " data-level="1.6.1" data-path="Optimizing-development.html">
            
                <a href="Optimizing-development.html">
            
                    
                    优化开发
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.2" data-path="Hot-loading-components.html">
            
                <a href="Hot-loading-components.html">
            
                    
                    热加载组件
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.3" data-path="JavaScript-next.html">
            
                <a href="JavaScript-next.html">
            
                    
                    使用下一代 JavaScript
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.4" data-path="Optimizing-caching.html">
            
                <a href="Optimizing-caching.html">
            
                    
                    优化缓存
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.5" data-path="Matchers.html">
            
                <a href="Matchers.html">
            
                    
                    匹配器
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.6" data-path="Lazy-loading-entry-points.md">
            
                <span>
            
                    
                    懒加载入口
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.7" data-path="Creating-a-common-bundle.md">
            
                <span>
            
                    
                    创建一个复用代码
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.8" data-path="Understanding-chunks.html">
            
                <a href="Understanding-chunks.html">
            
                    
                    理解 Chunks
            
                </a>
            

            
        </li>
    
        <li class="chapter " data-level="1.6.9" data-path="Authoring-libraries.html">
            
                <a href="Authoring-libraries.html">
            
                    
                    创建库
            
                </a>
            

            
        </li>
    

            </ul>
            
        </li>
    

    

    <li class="divider"></li>

    <li>
        <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
            Published with GitBook
        </a>
    </li>
</ul>


                </nav>
            
        
    </div>

    <div class="book-body">
        
            <div class="body-inner">
                
                    

<div class="book-header" role="navigation">
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="." >懒加载入口文件</a>
    </h1>
</div>




                    <div class="page-wrapper" tabindex="-1" role="main">
                        <div class="page-inner">
                            
<div id="book-search-results">
    <div class="search-noresults">
    
                                <section class="normal markdown-section">
                                
                                <p>It is also possible to lazy load entry points. This means that you load parts of your application as they are requested. A typical scenario for this would be that your users only visits specific parts of the application. And an example of that would be twitter.com. You do not always visit your profile page, so why load the code for that? Here is a summary of requirements:</p>
<p>Webpack &#x4E5F;&#x53EF;&#x4EE5;&#x5B9E;&#x73B0;&#x61D2;&#x52A0;&#x8F7D;&#x5165;&#x53E3;&#x6587;&#x4EF6;&#xFF0C;&#x610F;&#x5473;&#x7740;&#x5E94;&#x7528;&#x7684;&#x4E00;&#x90E8;&#x5206;&#x53EA;&#x5728;&#x9700;&#x8981;&#x7684;&#x65F6;&#x5019;&#x52A0;&#x8F7D;&#xFF0C;&#x4E00;&#x4E2A;&#x5178;&#x578B;&#x7684;&#x4F8B;&#x5B50;&#x662F;&#x7528;&#x6237;&#x53EA;&#x6709;&#x8BBF;&#x95EE;&#x4E00;&#x4E9B;&#x5E94;&#x7528;&#x7279;&#x5B9A;&#x7684;&#x90E8;&#x5206;&#xFF0C;&#x5178;&#x578B;&#x7684;&#x4F8B;&#x5B50;&#x662F; Twitter.com&#xFF0C;&#x4F60;&#x4E0D;&#x4F1A;&#x4E00;&#x76F4;&#x8BBF;&#x95EE;&#x4F60;&#x7684;&#x4E2A;&#x4EBA;&#x9875;&#xFF0C;&#x6240;&#x4EE5;&#x4E3A;&#x4EC0;&#x4E48;&#x8981;&#x52A0;&#x8F7D;&#x90A3;&#x90E8;&#x5206;&#x7684;&#x4EE3;&#x7801;&#xFF1F;&#x8FD9;&#x91CC;&#x6709;&#x4E2A;&#x4E3B;&#x8981;&#x7684;&#x8981;&#x6C42;&#xFF1A;</p>
<ul>
<li>You have a relatively big application where users can visit different parts of it</li>
<li>You do care a lot about initial render time</li>
</ul>
<ul>
<li>&#x4F60;&#x6709;&#x4E00;&#x4E2A;&#x76F8;&#x5BF9;&#x6BD4;&#x8F83;&#x5927;&#x7684;&#x5E94;&#x7528;&#xFF0C;&#x53EF;&#x4EE5;&#x8BA9;&#x7528;&#x6237;&#x53EF;&#x4EE5;&#x8BBF;&#x95EE;&#x5E94;&#x7528;&#x7684;&#x4E0D;&#x540C;&#x90E8;&#x5206;&#x3002;</li>
<li>&#x4F60;&#x975E;&#x5E38;&#x5173;&#x6CE8;&#x521D;&#x59CB;&#x6E32;&#x67D3;&#x65F6;&#x95F4;</li>
</ul>
<p><em>webpack.production.config.js</em></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">var</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;webpack&apos;</span>);
<span class="hljs-keyword">var</span> node_modules_dir = path.resolve(__dirname, <span class="hljs-string">&apos;node_modules&apos;</span>);

<span class="hljs-keyword">var</span> config = {
  entry: {
    app: path.resolve(__dirname, <span class="hljs-string">&apos;app/main.js&apos;</span>),
    vendors: [<span class="hljs-string">&apos;react&apos;</span>]
  },
  output: {
    path: path.resolve(__dirname, <span class="hljs-string">&apos;dist&apos;</span>),
    filename: <span class="hljs-string">&apos;app.js&apos;</span>
  },
  <span class="hljs-built_in">module</span>: {
    loaders: [{
      test: <span class="hljs-regexp">/\.js$/</span>,
      exclude: [node_modules_dir],
      loader: <span class="hljs-string">&apos;babel&apos;</span>
    }]
  },
  plugins: [
    <span class="hljs-keyword">new</span> webpack.optimize.CommonsChunkPlugin(<span class="hljs-string">&apos;vendors&apos;</span>, <span class="hljs-string">&apos;vendors.js&apos;</span>)
  ]
};

<span class="hljs-built_in">module</span>.exports = config;
</code></pre>
<p>So we are pretty much back where we started with a split application and vendors bundle. You do not really define your lazy dependencies in a configuration, Webpack automatically understands them when analyzing your code. So let us see how we would lazy load a <strong>profile page</strong>:</p>
<p>&#x6240;&#x4EE5;&#x6211;&#x4EEC;&#x628A;&#x5E94;&#x7528;&#x548C;&#x7B2C;&#x4E09;&#x65B9;&#x5206;&#x79BB;&#x662F;&#x4E00;&#x4EF6;&#x975E;&#x5E38;&#x6F02;&#x4EAE;&#x7684;&#x4E8B;&#xFF0C;&#x4F60;&#x4E0D;&#x9700;&#x8981;&#x5728;&#x914D;&#x7F6E;&#x4E2D;&#x8BBE;&#x7F6E;&#x61D2;&#x52A0;&#x8F7D;&#x4F9D;&#x8D56;&#xFF0C;Webpack &#x4F1A;&#x81EA;&#x52A8;&#x7406;&#x89E3;&#x4ED6;&#x4EEC;&#xFF0C;&#x7136;&#x540E;&#x5206;&#x6790;&#x4F60;&#x7684;&#x4EE3;&#x7801;&#x3002;&#x6240;&#x4EE5;&#x8BA9;&#x6211;&#x4EEC;&#x770B;&#x770B;&#x6211;&#x4EEC;&#x662F;&#x5982;&#x4F55;&#x52A0;&#x8F7D;&#x4E00;&#x4E2A; <strong>&#x4E2A;&#x4EBA;&#x4FE1;&#x606F;&#x9875;</strong>&#xFF1A;</p>
<p><em>main.js (&#x4F7F;&#x7528; ES6 &#x8BED;&#x6CD5;)</em></p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> Feed <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./Feed.js&apos;</span>;

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span> </span>{
  <span class="hljs-keyword">constructor</span>() {
    <span class="hljs-keyword">this</span>.state = { currentComponent: Feed };
  }
  openProfile() {
    <span class="hljs-built_in">require</span>.ensure([], () =&gt; {
      <span class="hljs-keyword">var</span> Profile = <span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;./Profile.js&apos;</span>);
      <span class="hljs-keyword">this</span>.setState({
        currentComponent: Profile
      });
    });
  }
  render() {
   <span class="hljs-keyword">return</span> (
      <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>{this.state.currentComponent()}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
    );
  }
}
React.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">App</span>/&gt;</span></span>, <span class="hljs-built_in">document</span>.body);
</code></pre>
<p>So this is just an example. You would probably hook this up to a router, but the important part is using <code>require.ensure</code>.</p>
<p>&#x8FD9;&#x53EA;&#x662F;&#x4E00;&#x4E2A;&#x4F8B;&#x5B50;&#xFF0C;&#x4F60;&#x9700;&#x8981;&#x628A;&#x8FD9;&#x4E9B;&#x5199;&#x5165;&#x5230;&#x4E00;&#x4E2A;&#x8DEF;&#x7531;&#x4E2D;&#xFF0C;&#x4E0D;&#x8FC7;&#x91CD;&#x8981;&#x7684;&#x4E8B;&#x60C5;&#x662F;&#x4F7F;&#x7528;&#x4E86; <code>require.ensure</code>&#x3002;</p>
<p><strong>What is the array on the first argument?</strong>: If you try to lazy load a chunk that depends on an other lazy loaded chunk you can set it as a dependency in the array. Just type in the path to the chunk. E.g. <code>[&apos;./FunnyButton.js&apos;]</code></p>
<p><strong>&#x7B2C;&#x4E00;&#x4E2A;&#x6570;&#x7EC4;&#x53C2;&#x6570;&#x662F;&#x4EC0;&#x4E48;&#xFF1F;</strong>&#xFF1A;&#x5982;&#x679C;&#x4F60;&#x5C1D;&#x8BD5;&#x53BB;&#x61D2;&#x52A0;&#x8F7D;&#x4E00;&#x6BB5;&#x7531;&#x53E6;&#x4E00;&#x4E2A;&#x61D2;&#x52A0;&#x8F7D;&#x7684;&#x4EE3;&#x7801;&#x52A0;&#x8F7D;&#x7684;&#x4EE3;&#x7801;&#x7684;&#x8BDD;&#xFF0C;&#x628A;&#x5B83;&#x4F5C;&#x4E3A;&#x4F9D;&#x8D56;&#x5199;&#x5728;&#x6570;&#x7EC4;&#x91CC;&#xFF0C;&#x5C31;&#x628A;&#x8DEF;&#x5F84;&#x5199;&#x8FDB;&#x53BB;&#xFF0C;&#x6BD4;&#x5982; <code>[&apos;./FunnyButton.js&apos;]</code></p>

                                
                                </section>
                            
    </div>
    <div class="search-results">
        <div class="has-results">
            
            <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
            <ul class="search-results-list"></ul>
            
        </div>
        <div class="no-results">
            
            <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
            
        </div>
    </div>
</div>

                        </div>
                    </div>
                
            </div>

            
                
                <a href="Multiple-entry-points.html" class="navigation navigation-prev " aria-label="Previous page: 多重入口">
                    <i class="fa fa-angle-left"></i>
                </a>
                
                
                <a href="Isomorphic-app.html" class="navigation navigation-next " aria-label="Next page: 同构渲染">
                    <i class="fa fa-angle-right"></i>
                </a>
                
            
        
    </div>

    <script>
        var gitbook = gitbook || [];
        gitbook.push(function() {
            gitbook.page.hasChanged({"page":{"title":"懒加载入口文件","level":"1.5.5","depth":2,"next":{"title":"同构渲染","level":"1.5.6","depth":2,"path":"Isomorphic-app.md","ref":"Isomorphic-app.md","articles":[]},"previous":{"title":"多重入口","level":"1.5.4","depth":2,"path":"Multiple-entry-points.md","ref":"Multiple-entry-points.md","articles":[]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-pro","fontsettings","livereload"],"root":"./content","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"search-pro":{},"fontsettings":{"theme":"white","family":"sans","size":2},"livereload":{},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{"version":"0.0.0"},"title":"test search plus plugin","gitbook":"*"},"file":{"path":"Lazy-loaded-entry-points.md","mtime":"2017-01-24T08:51:37.000Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-01-24T08:53:13.796Z"},"basePath":".","book":{"language":""}});
        });
    </script>
</div>

        
    <script src="gitbook/gitbook.js"></script>
    <script src="gitbook/theme.js"></script>
    
        
        <script src="gitbook/gitbook-plugin-search-pro/jquery.mark.min.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-search-pro/search.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-livereload/plugin.js"></script>
        
    
        
        <script src="gitbook/gitbook-plugin-sharing/buttons.js"></script>
        
    

    </body>
</html>

